﻿@{
    Layout = null;
}
<!DOCTYPE html>
@model GN.Pay.Application.Dto.Output.ServiceMessageResultOutput<List<GN.Pay.Application.GatewayApp.Dto.Output.BankCardOutput>>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="~/Content/Wap/Wapcss/resetWap.css" rel="stylesheet" />
    <link href="~/Content/pay/banklist.css" rel="stylesheet" />
    <link href="~/Scripts/layer/skin/default/layer.css" rel="stylesheet" />
    <title>银行卡列表</title>
</head>
<body ng-app="app">
    <ng-view></ng-view>
    <script src="~/Scripts/Wapjs/Wapjquery-1.10.2.min.js"></script>
    <script src="~/Scripts/layer/layer.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.1.js"></script>
    <script src="~/Scripts/Wapjs/Wapangularjs.min.js"></script>
    <script src="~/Scripts/Wapjs/Wapangular-route.min.js"></script>
    <script>
        angular.module('app', ['ngRoute'])

            .config(['$routeProvider', function ($routeProvider) {

                $routeProvider

                    .when('/paylist2', {
                        templateUrl: 'paylist2.html',
                        controller: 'paylist2Crtl',
                        reload: true
                    })

                    .when('/paylist3', {
                        templateUrl: 'paylist3.html',
                        controller: 'paylist3Crtl'
                    })
                    .when('/paylist4/:id', {
                        templateUrl: 'paylist4.html',
                        controller: 'paylist4Crtl'
                    })
                    .when('/paylist5/:id', {
                        templateUrl: 'paylist5.html',
                        controller: 'paylist5Crtl'
                    })
                    .when('/paylist6', {
                        templateUrl: 'paylist6.html',
                        controller: 'paylist6Crtl'
                    })

                    //设置默认显示的页面，或者当你访问一个不存在的路径的时候，也会显示这个页面
                    .otherwise('/paylist2')

            }])

            .controller('paylist2Crtl', ['$scope', '$routeParams', function ($scope, $routeParams) {
                $scope.bank = function () {
                    history.go(-1);
                };              
            }])
            .controller('paylist3Crtl', ['$scope', '$routeParams', function ($scope, $routeParams) {
                $scope.bank = function () {
                    history.go(-1);
                }
            }])
            .controller('paylist4Crtl', ['$scope', '$routeParams', function ($scope, $routeParams) {
                $scope.bank = function () {
                    history.go(-1);
                }
                $scope.ids = $routeParams.id; // 传过来的索引

            }])
            .controller('paylist5Crtl', ['$scope', '$routeParams', function ($scope, $routeParams) {
                $scope.bank = function () {
                    history.go(-1);
                };
                $scope.tel = $routeParams.id; // 传过来的索引
            }])
            .controller('paylist6Crtl', ['$scope', '$routeParams', function ($scope, $routeParams) {
                $scope.bank = function () {
                    history.go(-1);
                };
                telInfo();
            }])
    </script>

    <script type="text/ng-template" id="paylist2.html">
        <div class="hearder addBanks">
            <a class="bankGo" href="javascript:history.go(-1);location.reload()"></a>
            <p class="titleName" style="line-height: 4rem;">快捷支付</p>
            <i><a href="#/paylist3">新增银行卡</a></i>
        </div>
        <div class="addbankList">

            <ul>
                @if (Model.Result != null && Model.Result.Count > 0)
                {
                    foreach (var item in (List<GN.Pay.Application.GatewayApp.Dto.Output.BankCardOutput>)Model.Result)
                    {
                        <li data-channelId="@item.ChannelId" data-bankNo="@item.BankNo" data-Id="@item.Id" data-phone="@item.MobilePhone">
                            <a href="#/paylist6">
                                <p>
                                    <img src="~/Content/Wap/images/bank/@(item.ChannelId).png" />
                                    <span>@item.BankName <span>(@item.CardLastNo)</span></span>
                                </p>
                            </a>
                        </li>
                    }
                }
            </ul>
        </div>
    </script>
    <script type="text/ng-template" id="paylist3.html">
        <div class="hearder">
            <i class="bankGo" ng-click="bank()"></i>
            <p class="titleName addName">添加银行卡</p>
        </div>
        <form novalidate name="loginForm">
            <div class="oInputBank">
                <label>
                    <span>银行卡号</span>
                    <input maxlength="19" id="idCard" name="idCard" class="clearVlue" ng-model="idCard" required type="text" placeholder="请输入正确的银行卡号,暂只支持贵阳银行" />
                </label>
            </div>
        </form>
        
        <div class="getGo">
            <a href="#/paylist4/{{idCard}}"><button ng-disabled="loginForm.$invalid" class="btnGo" ng-class="{true: 'active'}[!loginForm.$invalid]">下一步</button></a>
        </div>
    </script>
    <script type="text/ng-template" id="paylist4.html">
        <div class="hearder">
            <i class="bankGo" ng-click="bank()"></i>
            <p class="titleName addName">填写银行卡信息</p>
        </div>
        <div class="masgInfo">
            <p class="masgInfop">
                <span>银行</span> <span>贵阳银行</span>
            </p>
            <p class="masgInfop">
                <span>银行卡号</span> <span id="bankIds">{{ids}}</span>
            </p>
        </div>

        <form style="margin-top: 2rem;background: #fff; position: relative;" action="" novalidate name="loginForm">
            <div class="oInputBank">
                <label>
                    <span>姓名</span>
                    <input class="clearVlue1" id="username" name="username" type="text" ng-pattern="/^([\u4e00-\u9fa5]){2,7}$/" placeholder="请输入姓名" ng-model="name" required maxlength="5"/>
                </label>
            </div>
            <div class="oInputBank">
                <label>
                    <span>身份证号</span>
                    <input class="clearVlue2" type="text" id="idCards" name="idCards" ng-pattern="/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/" placeholder="请输入正确的身份证号码" ng-model="idCards" required maxlength="18"/>
                </label>
            </div>
            <div class="oInputBank">
                <label>
                    <span>手机号</span>
                    <input class="clearVlue3" type="tel" id="cellphone" name="cellphone" ng-pattern="/^1[34578]\d{9}$/" ng-model="phone" required placeholder="请输入正确的手机号码" maxlength="11"/>
                </label>
            </div>
        </form>

        <div class="getGo">
            <a href="#/paylist5/{{phone}}"><button onclick="getBankinfo()" style="position: fixed; bottom: 0; left: 0;" ng-disabled="loginForm.$invalid" class="btnGo" ng-class="{true: 'active'}[!loginForm.$invalid]">开通快捷支付</button></a>
        </div>
    </script>
    <script type="text/ng-template" id="paylist5.html">

        <div class="hearder">
            <i class="bankGo" ng-click="bank()"></i>
            <p class="titleName addName">银行卡绑定</p>
        </div>
        <div class="bannerIofo">
            <div class="bannerImg">

                <img src="/Content/Wap/images/pay.png" />
            </div>
        </div>
        <p class="telInfo">请输入<span>{{tel}}</span>手机号获取的验证码</p>

        <form novalidate name="loginForm">
            <div class="getCode">
                <input type="tel" id="yzcode" name="yzcode" ng-minlength="6" ng-maxlength="6" ng-model="yzcode" placeholder="请输入验证码" required />
                <button onclick="getCodess()" id="getCodes">获取验证码</button>
            </div>
        </form>
        <div class="getGo">
            <button onclick="bindBank()" style="position: fixed; bottom: 0; left: 0;" ng-disabled="loginForm.$invalid" class="btnGo" ng-class="{true: 'active'}[!loginForm.$invalid]">确认绑定</button>
        </div>

    </script>
    <script type="text/ng-template" id="paylist6.html">
        <div class="hearder">
            <i class="bankGo" ng-click="bank()"></i>
            <p class="titleName addName">快捷支付</p>
        </div>
        <div class="bannerIofo">
            <p class="infos">
                <span>待付款</span>
                <span id="orderMoney">￥2288.00</span>
            </p>
            <div class="bannerImg">
                <img src="/Content/Wap/Wapimages/pay.png" />
            </div>
        </div>
        <p class="telInfo">请输入<span id="telPhoto"></span>手机号获取的验证码</p>

        <form novalidate name="loginForm">
            <div class="getCode">
                <input type="tel" id="yzcodes" name="yzcodes" ng-minlength="6" ng-maxlength="6" ng-model="yzcodes" placeholder="请输入验证码" required />
                <button onclick="getbankCode()" id="getCodes2">获取验证码</button>
            </div>
        </form>
        <div class="getGo">
            <button onclick="paysBank()" style="position: fixed; bottom: 0; left: 0;" ng-disabled="loginForm.$invalid" class="btnGo" ng-class="{true: 'active'}[!loginForm.$invalid]">确认支付</button>
        </div>

    </script>



    <script type="text/javascript">

        var isCancelTime = false;
        var token = "";
        var infos = {};
        var codeInfos = {}; //支付参数
        var payBankmoney = {};//确认支付
        $(function () {
            $(".addbankList ul li").each(function (i, e) {
                $(this).click(function () {
                    codeInfos.ApplyId = '@ViewBag.ApplyId';
                    codeInfos.ChannelId = $(this).attr("data-channelId");
                    codeInfos.BankCradPayId = $(this).attr("data-Id");
                    localStorage.payInfos = JSON.stringify(codeInfos);
                    localStorage.phone = $(this).attr("data-phone");

                })
            });
        });

        //获取支付银行卡短信
        function getbankCode() {
            var index = layer.load(1, { shade: [0.1, '#000'] });
            var infos = JSON.parse(localStorage.payInfos);
            $("#getCodes2").css("background", "#ccc");
            $.post("/Wap/PayChannel", infos, function (data) {
                if (data.success) {
                    var count = 60;
                    var timer = setInterval(function () {
                        if (count == 0) {
                            $("#getCodes2").css("background", "#4CD964");
                            $("#getCodes2").removeAttr("disabled");
                            clearInterval(timer);
                            $("#getCodes2").html("获取验证码");
                        } else {
                            count--;
                            $("#getCodes2").attr("disabled", "disabled");
                            $("#getCodes2").html(count + "秒后重新发送短信");
                        }
                    }, 1000);
                    layer.close(index);
                    payBankmoney.payId = data.result.payId;

                } else {
                    $("#getCodes2").css("background", "#4CD964");
                    layer.close(index);
                    layer.msg(data.error.message, {
                        time: 5000, //1s后自动关闭
                    });
                }
            })
        }

        //绑卡确认
        function bindBank() {
            var index = layer.load(1, { shade: [0.1, '#000'] });
            var data = {}
            var srcUrl = localStorage.urlSrc;
            var applys = JSON.parse(localStorage.apply);
            data._AppId = applys.ApplyId;
            if (token) {
                data.Token = token;
            } else {
                layer.close(index);
                layer.msg("请获取验证码后再操作", {
                    time: 5000, //1s后自动关闭
                });
                return;
            };
            data.SmsCheckCode = $("#yzcode").val();
            $.post("/Cashie/MemberBankCardBind", data, function (data) {
                if (data.success) {
                    layer.close(index);
                    layer.msg('绑定成功', {
                        time: 1000, //1s后自动关闭
                    }, function () {
                        history.go(-4);
                    });
                } else {
                    layer.close(index);
                    layer.msg(data.error.message, {
                        time: 5000, //1s后自动关闭
                    });
                }
            })
        }

        //绑定卡获取验证码
        function getCodess() {
            var index = layer.load(1, { shade: [0.1, '#000'] });
            var bankInfos = JSON.parse(localStorage.bankInfo);
            bankInfos.ApplyId = JSON.parse(localStorage.apply).ApplyId;
            /*验证码*/
            $("#getCodes").css("background", "#ccc");
            //获取短信
            $.post("/Cashie/MemberBankCardBindApply", bankInfos, function (data) {
                if (data.success) {
                    var count = 60;
                    var timer = setInterval(function () {
                        if (isCancelTime) {
                            clearInterval(timer);
                            $("#getCodes").html("获取验证码");
                            return;
                        }
                        if (count == 0) {
                            $("#getCodes").css("background", "#4CD964");
                            $("#getCodes").removeAttr("disabled");
                            clearInterval(timer);
                            $("#getCodes").html("获取验证码");
                        } else {
                            count--;
                            $("#getCodes").attr("disabled", "disabled");
                            $("#getCodes").html(count + "秒后重新发送短信");
                        }
                    }, 1000);
                    layer.close(index);
                    //token
                    token = data.result.token;
                } else {
                    layer.close(index);
                    $("#getCodes").css("background", "#6FCB15");
                    layer.msg(data.error.message, {
                        time: 3000, //1s后自动关闭
                    });
                    
                }

            })

        };

        //银行卡付款
        function paysBank() {
            var index = layer.load(1, { shade: [0.1, '#000'] });
            payBankmoney.SmsCheckCode = $("#yzcodes").val();
            if (payBankmoney.payId) {
                $.post("/Cashie/SmsPay", payBankmoney, function (data) {
                    if (data) {
                        if (data.success) {
                            layer.close(index);                           
                            layer.msg('付款成功,正在处理...,长时间无反应请自行转到订单中心查看', {
                                time: 6000, //1s后自动关闭
                            }, function () {
                                location.href = "/Wap/PayRedirectResult?tradeNo=" + data.result.tradeNo;
                                isCancelTime = true;
                                $("#getCodes").attr("disabled", "disabled");
                                $("#yzcodes").attr("disabled", "disabled");
                            });
                        } else {
                            layer.close(index);
                            layer.msg(data.error.message, {
                                time: 5000, //1s后自动关闭
                            });
                        }

                    } else {
                        layer.close(index);
                        layer.msg("网络出错，请稍候重试！", {
                            time: 5000, //1s后自动关闭
                        });//调试
                    }
                })

            } else {
                layer.close(index);
                layer.msg("请获取验证码", {
                    time: 3000, //1s后自动关闭
                });//调试
            }
        }

        //获取用户填写绑定银行卡信息
        function getBankinfo() {
            var data = {};
            //名字
            data.AccountName = $("#username").val();
            //身份证号
            data.IdentityNo = $("#idCards").val();
            //手机号码
            data.MobilePhone = $("#cellphone").val();
            //申请id

            data.BankNo = "gyb";
            //银行卡号
            data.AccountNo = $("#bankIds").html();
            localStorage.bankInfo = JSON.stringify(data);

        };
        function telInfo() {
            $("#telPhoto").html(localStorage.phone);
            $("#orderMoney").html(localStorage.payMoney + "元");
        };


        var connection = $.hubConnection();
        var notifyProxy = connection.createHubProxy('notifyHub');
        notifyProxy.on('notify', function (msg) {
            var obj = JSON.parse(msg);
            location.href = "/Wap/PayRedirectResult?tradeNo=" + obj.tradeNo;
        });
        connection.start().done(function () {
            notifyProxy.invoke('registerApply', JSON.parse(localStorage.apply).ApplyId);
        });


    </script>
</body>
</html>